<template>
  <div>
    <el-page-header @back="goBack" content="新增进货记录" style="color:#3198ff"></el-page-header>
    <el-card class="box-card" style="margin-top: 20px">
      <el-row :gutter="40" v-for="(item,i) in tableData" :key="i">
        <el-col :span="6">
          <div class="form-item">
            <span class="title">商品SKU</span>
            <el-cascader
              v-model="item.skuId"
              :props="props"
              :show-all-levels="false"
              :options="options"
              @change="handleChange(item,i)"
            ></el-cascader>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="form-item">
            <span class="title">进货数量</span>
            <el-input-number
              type="number"
              placeholder="请输入数量"
              :min="1"
              :precision="0"
              :step="1"
              controls-position="right"
              v-model="item.num"
            ></el-input-number>
          </div>
        </el-col>
        <el-col :span="2">
          <div class="form-item">
            <el-button type="primary" icon="el-icon-plus" circle @click="add()"></el-button>
            <el-button
              v-if="i!=0"
              type="danger"
              icon="el-icon-minus"
              circle
              @click="deleteClcik(item,i)"
            ></el-button>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <div style="margin-top: 50px">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="form-item">
            <span class="title"><span style="color:#F56C6C">* </span>进货时间：</span>
            <el-date-picker
              :clearable="false"
              v-model="GoTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期时间"
            ></el-date-picker>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="10">
          <div class="form-item">
            <span class="title"><span style="color:#F56C6C">* </span>备注：</span>
            <el-input type="textarea" :rows="5" placeholder v-model="Mark"></el-input>
          </div>
        </el-col>
      </el-row>
      <div style="text-align:center; margin-top: 50px;">
        <el-button type="primary" @click="submitForm()">保存</el-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "",
  data() {
    return {
      tableData: [
        {
          skuId: "",
          num: ""
        }
      ],
      options: [],
      GoTime: "",
      Mark: "",
      props: {
        lazy: true,
        lazyLoad: (node, resolve) => {
          const { value, level } = node;

          if (level == 0) {
            const nodes = this.options.map(item => ({
              value: item.label,
              label: item.value,
              leaf: level >= 1
            }));

            this.$service.firstGoods().then(res => {
              console.log(res);
              let list = res.data;
              // this.options = res;
              let arr = [];
              list.forEach(item => {
                arr.push({
                  value: item.id,
                  label: item.name,

                  leaf: level >= 2
                });
              });
              resolve(arr);
              // console.log(res.obj);
            });
          } else if (level == 1) {
            this.$service.secondGoods(node.value).then(res => {
              const nodes = res.data.map(item => {
                return {
                  value: item.id,
                  label: item.name,
                  leaf: level >= 2
                };
              });
              resolve(nodes);
            });
          } else if (level == 2) {
            var param = {
              tbSpu: {
                cid2: node.value
              }
            };
            this.$service.getCommodityCategory(param).then(res => {
              const nodes = res.data.map(item => {
                return {
                  value: item.id,
                  label: item.title,
                  leaf: level >= 3
                };
              });
              resolve(nodes);
            });
          } else if (level == 3) {
            this.$service.getSkus(node.value).then(res => {
              const nodes = res.data.map(item => {
                return {
                  value: item.id,
                  label: item.title+"/"+item.ownSpec,
                  leaf: level >= 3
                };
              });
              resolve(nodes);
            });
          } else {
            resolve([]);
          }
        }
      }
    };
  },
  components: {},
  computed: {},
  beforeMount() {},
  mounted() {},
  methods: {
    firstlevel() {
      this.$service.firstGood().then(res => {
        if (res.code == "00000") {
          let list = res.data;
          let arr = [];
          list.forEach(item => {
            arr.push({
              label: item.name,
              value: item.id
            });
          });
        }
      });
    },
    goBack() {
      this.$router.back();
    },
    submitForm() {
      var param = {};

      //增加判断
      if (this.GoTime == "") {
        this.$message({
          message: "请选择进货时间",
          type: "warning"
        });
        return;
      } else {
        param.purchaseTime = this.GoTime;
      }
      if (this.remark == "") {
        this.$message({
          message: "请填写备注",
          type: "warning"
        });
        return;
      } else {
        param.remark = this.Mark;
      }
      if (this.tableData.length == 0) {
        this.$message({
          message: "请添加商品",
          type: "warning"
        });
        return;
      } else {
        param.inventoryrecordsList = JSON.parse(JSON.stringify(this.tableData));
      }
      for (let i = 0; i < this.tableData.length; i++) {
        var item = this.tableData[i];
        if (item.skuId == ""||item.num =="") {
          this.$message({
            message: "请完善添加商品信息",
            type: "warning"
          });
          return;
        }
        console.log(item)
        param.inventoryrecordsList[i].skuId = item.skuId[3];
      }
      param.userId = this.Global.user.userId;
      console.log(param);
      this.$service.insertPurchase(param).then(res => {
        if (res.code == "00000") {
          this.$message({
            message: "添加成功",
            type: "success"
          });
          this.$router.back();
        } else {
          this.$message({
            message: res.message,
            type: "warning"
          });
        }
      });
      console.log(this.tableData);
    },
    handleChange(item, i) {},
    deleteClcik(item, i) {
      this.tableData.splice(i, 1);
    },
    add() {
      var dic = {
        skuId: "",
        num: ""
      };
      this.tableData.push(dic);
    }
  },
  watch: {}
};
</script>
<style scoped>
</style>